<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-left">
        <img src="../assets/images/02.png" alt="" />
      </div>
      <div class="login-right">
        <div class="login-title">白霜供应商系统</div>
        <div class="login-list1">
          <div
            class="title"
            :class="{ title2: item.flag }"
            @click="handleSelect(item.title)"
            v-for="item in loginOrSign"
            :key="item"
          >
            {{ item.title }}
          </div>
        </div>
        <!--  登录Form -->
        <el-form
          v-if="loginFlag == '登录'"
          style="width: 50%"
          ref="refs"
          :model="user"
          status-icon
          :rules="rules"
        >
          <el-form-item style="margin-top: 70px" prop="userName">
            <div class="inputDeep">
              <el-input
                size="medium"
                class="border-input"
                type="text"
                placeholder="账号"
                v-model="user.userName"
                prefix-icon="el-icon-user-solid"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="userPwd">
            <div class="inputDeep">
              <el-input
                size="medium"
                class="border-input"
                type="password"
                placeholder="密码"
                v-model="user.userPwd"
                prefix-icon="el-icon-lock"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="findpwd"><span>找回密码</span></div>
          </el-form-item>
          <el-form-item>
            <el-button
              size="medium"
              @click="login"
              class="btn-login"
              type="primary"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <!--  注册Form -->
        <el-form
          v-if="loginFlag == '注册'"
          style="width: 50%"
          ref="refs"
          :model="user"
          status-icon
          :rules="rules"
          label-position="left"
        >
          <el-form-item
            style="margin-top: 70px"
            prop="userName"
            label-width="90px"
            label="用户名"
          >
            <div class="inputDeep">
              <el-input
                class="border-input"
                size="medium"
                type="text"
                placeholder="请输入用户名"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="userPwd" label-width="90px" label="密码">
            <div class="inputDeep">
              <el-input
                class="border-input"
                size="medium"
                type="text"
                placeholder="密码"
                v-model="user.userPwd"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="userPwd" label-width="90px" label="确认密码">
            <div class="inputDeep">
              <el-input
                class="border-input"
                size="medium"
                type="text"
                placeholder="密码"
                v-model="user.userPwd"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              size="medium"
              @click="login"
              class="btn-login"
              type="primary"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      loginFlag: "登录",
      loginOrSign: [
        { title: "登录", flag: true },
        { title: "注册", flag: false },
      ],
      user: {
        userName: "admin",
        userPwd: "admin123",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        userPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    login() {
      this.$refs.refs.validate(async (e) => {
        if (e) {
          const res = await this.$api.login(this.user);
          if (res == "密码错误") {
            this.$message.error("账号或密码错误");
          } else {
            this.$store.commit("savaUserInfo", res[0]);
            //this.$storage
            this.$router.push("/welcome");
          }
        } else {
          return false;
        }
      });
    },
    handleSelect(e) {
      this.loginFlag = e;
      this.loginOrSign[1].flag = !this.loginOrSign[1].flag;
      this.loginOrSign[0].flag = !this.loginOrSign[0].flag;
      console.log(e);
    },
  },
};
</script>
<style lang="scss">
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  //background: #f9fcff;
  background: url("../assets/images/background.png");
  width: 100vw;
  height: 100vh;
}
.login-box {
  width: 60%;
  min-width: 1000px;
  min-height: 550px;
  height: 55%;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
  .login-left {
    width: 50%;
    height: 100%;
    background: whitesmoke;
    opacity: 0.95;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 70%;
    }
  }
  .login-right {
    width: 50%;
    height: 100%;
    background: #fff;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .login-title {
      width: 100%;
      height: 80px;
      font-size: 32px;
      text-align: center;
      font-weight: bold;
      color: #f38814;
    }
    .login-list1 {
      width: 50%;
      display: flex;
      justify-content: space-around;
      .title {
        font-size: 24px;
        font-weight: bold;
        padding-bottom: 10px;
        border-bottom: 3px solid #fff;
      }
      .title2 {
        transition: all 0.5s;
        border-bottom: 3px solid #ff824f;
      }
    }
    .findpwd {
      width: 100%;
      margin-top: -10px;
      text-align: right;
      color: rgb(243, 136, 20);
    }
    .findpwd span:hover {
      cursor: pointer;
    }
    .btn-login {
      margin-top: 30px;
      width: 100%;
      background: rgb(243, 136, 20);
      border: 0;
    }
  }
}

.inputDeep .el-input--medium .el-input__inner {
  border: 0;
  // background: none;
}

.border-input {
  border-bottom: 2px solid rgb(235, 226, 226);
}
video {
  position: fixed;
  top: -20%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
  transform: translateX(-10%);
}
</style>
